<script setup>
import { RouterView } from 'vue-router';
import { ref, onMounted, onUnmounted } from 'vue';

// 进度条动画
const progress = ref(0);
const showProgress = ref(true);
let progressTimer = null;

function startProgress() {
  progress.value = 0;
  showProgress.value = true;
  progressTimer = setInterval(() => {
    if (progress.value < 95) {
      progress.value += Math.random() * 5;
    } else {
      clearInterval(progressTimer);
    }
  }, 100);
}
function finishProgress() {
  progress.value = 100;
  setTimeout(() => {
    showProgress.value = false;
    progress.value = 0;
  }, 400);
}

onMounted(() => {
  startProgress();
  window.addEventListener('load', finishProgress);
});
onUnmounted(() => {
  clearInterval(progressTimer);
  window.removeEventListener('load', finishProgress);
});
</script>

<template>
  <div>
    <RouterView/>
  </div>
</template>

<style>
/* 全局菜单美化 */
.el-menu {
  background: #2f4156 !important; /* 与侧边栏一致 */
  border-radius: 0;
  box-shadow: none;
  border: none;
  overflow: hidden;
}
.el-menu-item, .el-sub-menu__title {
  font-size: 16px;
  color: #b1becd !important;
  background: #2f4156 !important;
  transition: background 0.2s, color 0.2s;
  position: relative;
}
.el-menu-item:hover, .el-sub-menu__title:hover {
  background: #1f2d3d !important;
  color: #fff !important;
}
.el-menu-item.is-active, .el-menu-item.is-active:hover {
  background: #336cab !important;
  color: #fff !important;
}
.el-menu-item.is-active .el-icon {
  color: #fff !important;
}

/* 面包屑美化 */
.el-breadcrumb {
  font-size: 15px;
  margin-bottom: 16px;
}
.el-breadcrumb__item {
  color: #26c6da;
}
.el-breadcrumb__item:last-child {
  color: #00bcd4;
  font-weight: bold;
}

/* 表格美化 */
.el-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.el-table th, .el-table td {
  font-size: 15px;
}
.el-table__header th {
  background: #e0f7fa !important;
  color: #00bcd4 !important;
}
.el-table__row:hover td {
  background: #f1fafd !important;
}

/* 按钮美化 */
.el-button {
  border-radius: 8px !important;
  font-weight: 500;
  letter-spacing: 1px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.el-button--primary {
  background: linear-gradient(90deg, #26c6da 0%, #00bcd4 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(38,198,218,0.08);
}
.el-button--primary:hover {
  background: #00bcd4 !important;
  color: #fff !important;
}
.el-button--danger {
  background: linear-gradient(90deg, #ff6b81 0%, #ff4757 100%) !important;
  border: none !important;
  color: #fff !important;
}
.el-button--danger:hover {
  background: #ff4757 !important;
  color: #fff !important;
}

/* 弹窗美化 */
.el-dialog {
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(38,198,218,0.08);
}
.el-dialog__header {
  background: #e0f7fa;
  color: #00bcd4;
  border-radius: 16px 16px 0 0;
  font-size: 20px;
  font-weight: bold;
}
.el-dialog__body {
  background: #fff;
  font-size: 16px;
}
.el-dialog__footer {
  background: #f8fafd;
  border-radius: 0 0 16px 16px;
}

/* 小猫动效 */
.cat-on-bar {
  position: fixed;
  top: -20px;
  left: 0;
  width: 48px;
  height: 48px;
  z-index: 10000;
  transition: left 0.2s;
  pointer-events: none;
}

/* 全局 ul/li 美化（避免影响表格等） */
ul:not(.el-pager):not(.el-table__body):not(.el-menu) {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5em 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border: 1px solid #e5e6eb;
  overflow: hidden;
}
ul:not(.el-pager):not(.el-table__body):not(.el-menu) > li {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 16px;
  color: #6c6c6c;
  background: #fff;
  transition: background 0.2s, color 0.2s;
  position: relative;
}
ul:not(.el-pager):not(.el-table__body):not(.el-menu) > li:last-child {
  border-bottom: none;
}
ul:not(.el-pager):not(.el-table__body):not(.el-menu) > li:hover {
  background: #e0f7fa;
  color: #00bcd4;
}
</style>
